<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar
                title="确认订单"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div class="address" @click="jumpToAddressList">
            <div class="address_icon">
                <div><van-icon name="location-o" size="1.5rem"/></div>
            </div>
            <div class="address_message" v-if="defaultAddress">
                <div class="address_message_top">
                    <div class="address_message_top_name">{{address.name ? address.name : defaultAddress.name}}</div>
                    <div>{{address.tel ? address.tel : defaultAddress.tel}}</div>
                </div>
                <div class="address_message_bottom">
                    {{address.address ? address.address : defaultAddress.address}}
                </div>
            </div>
            <div class="address_message" v-else>
                <div class="address_message_top">暂无收货基本信息</div>
                <div class="noAddress_message_bottom">请前往
                    <router-link to="/addressList">
                        <p style="display:inline-block;color:blue">地址管理</p>
                    </router-link>
                    进行添加
                </div>
            </div>
        </div>
        <div>
            <div class="goods" v-for="(item,index) in selectGoods" :key="index">
                <div class="goods-img">
                    <img :src="item.img" width="100%"/>
                </div>
                <div class="goods-text">
                    <div class="goods-name">{{item.name}}</div>
                    <div class="goods-text-bottom">
                        <div class="goods-price">￥{{item.price}}</div>
                        <div class="goods-count">
                            <span>x{{item.quanity}}</span>
                        </div>  
                    </div>
                </div>
                
            </div>
        </div>


        <div>
            <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
                <span>共{{selectGoods.length}}件</span>
            </van-submit-bar>
        </div>
       
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return {
                address: null,
                defaultAddress: null,
                userID: null,
                selectGoods: [],  //结算时选中的商品
                totalPrice: 0,  //总价格
            }
        },
        created(){
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo)
                this.userID = userInfo.userId
            }
            if(localStorage.settleGoods){
                let goodMessage = JSON.parse(localStorage.settleGoods)
                this.selectGoods = goodMessage.goods
            }
            for(let item of this.selectGoods){
                this.totalPrice += item.price*item.quanity*100
                console.log("totalMoney==============",this.totalPrice);
            }
            // this.selectGoods = this.$route.params.selectGoods ? this.$route.params.selectGoods :[]
            // this.totalPrice = this.$route.params.totalPrice ? this.$route.params.totalPrice : this.totalPrice
            this.address= this.$route.params.address ? this.$route.params.address : {name:null,tel:null,address:null}
            console.log("selectGoods------------",this.selectGoods);
        },
        mounted(){
            this.$store.dispatch('HIDENAV')
            this.getAddressList()
        },
        destroyed(){
            this.$store.dispatch('SHOWNAV')
        },
        methods: {
            onClickLeft(){
                this.$router.push({name:'Cart'})
            },
            jumpToAddressList(){
                this.$router.push({ name:'AddressList',params:{selectGoods:this.selectGoods,totalPrice:this.totalPrice} })
            },
            getAddressList(){
                axios({
                        url: 'http://localhost:3000/address/shippingAdderssList',
                        method: 'post',
                        data:{
                            userId: this.userID,
                        }
                    }).then(response =>{
                        console.log(response);
                        const {data,status} = response
                        if(status === 200){
                            if(data.message){
                                this.defaultAddress = data.message[0]
                                for(let item of data.message){
                                    if(item.isDefault === 1){
                                        this.defaultAddress = item 
                                    }
                                }
                            }
                        }else{
                            Toast('服务器错误，数据取得失败')
                        }
                    })
            },
            onSubmit(){
                if(this.defaultAddress){
                    let id = []
                    let quanity = []
                    let goodsId = []
                    for(let item of this.selectGoods){
                        id.push(item.id)
                        quanity.push(item.quanity)
                        goodsId.push(item.goodsId)
                    }
                    axios({
                        url: 'http://localhost:3000/goods/settleGoods',
                        method: 'post',
                        data:{
                            Id: id.join(","),
                            quanity,
                            goodsId
                        }
                    }).then(res =>{
                        if(res.data.state===200){
                            Toast.success('结算成功');
                            this.$router.push({name:'Cart'})
                        }
                        if(res.data.state===500){
                            Toast.success('存在库存不足商品,请修改商品数量！');
                            this.$router.push({name:'Cart'})
                        }                   
                        console.log("------------res=========",res);
                    }).catch((error) => {
                        console.log(error)
                    })
                }else{
                    Toast.fail("请先添加收货基本信息")
                }
            },
        }
    }
</script>

<style >
    @import '../assets/css/goods.css';
     /* #app{
        background-color:;
    } */
    .address{
        display: flex;
        /* width: 100%; */
        height: 5rem;
        background-color:  #F0F8FF;
        margin: 5px;
        border-radius: 10px;
    }
    .address_icon{
        flex: 4;
        margin: auto;
    }
    .address_icon>div{
        width: 2.2rem;
        height: 1.8rem;
        border-radius: 40px;
        background-color: tomato;
        margin-left: .5rem;
        padding-top: 5px;
        /* padding-left: 5px; */
    }
    .address_message{
        flex: 20;
    }
    .address_message_top{
        display: flex;
        margin-top: 1rem;
        margin-bottom: .2rem;
        /* margin-left: 20px; */
    }
    .address_message_top_name{
        margin-right: 10px;
        font-weight:bold
    }
    .noAddress_message_bottom{
        padding-bottom: 2rem;
        margin-left: 1rem;
    }
    .goods{
        display: flex;
        flex-direction: row; /* //横向布局 */
        flex-wrap: nowrap;   /*不换行*/
        padding: 0.5rem;
        font-size: .8rem;
        border-bottom: 1px solid #e4e7ed;
    }
    .goods-img{
        flex: 9;
    }
    .goods-text{
        flex: 15;
        padding-left:10px;
        margin-top: 2rem;
    }
    .goods-text-bottom{
        display: flex;
        padding-top: 10px;
        
    }
    .goods-text-bottom .goods-price{
        margin: 5px 5rem auto 2rem;
        
    }
    .goods-text-bottom .goods-count{
        background-color: white;
        margin-top: 6px;
    }
</style>